<template>
	<!-- 美食 -->
	<view>
		<view class="search-input">
			<uni-search-bar v-model="searchValue" @input="input" @cancel="cancel" @clear="clear" placeholder="点击可搜索店铺"></uni-search-bar>
			
		</view>
		<view class="tab">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<!-- <view class="cu-item" :class="i==TabCur?'text-green':''" v-for="(item,i) in tab" :key="i" @tap="tabSelect" :data-id="i"> -->
				<view class="cu-item" :class="i==TabCur?'text-green':''" v-for="(item,i) in tab" :key="i"
					@click="tabSelect(item,i)" :data-id="i">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view v-for="(item,index) in list" :key="index">
				<!-- <view class="item flex-cb" @click="handlelist(item)" v-if="show(item)"> -->
				<view class="item flex-cb" @click="handlelist(item)">
					<view class="img_div">
						<image :src="item.shop_cover?src+item.shop_cover:'/static/logo.png'" mode=""></image>
					</view>
					<view class="text_div">
						<view class="food_name flex-cb">
							<text>{{item.shop_name||'城帮小店'}}</text>
							<text class="state" :class="{state1:item.open_status != '营业中'}">{{item.open_status}}</text>
						</view>
						<view class="score">
							<text class="cuIcon-favorfill"></text>
							<text class="num">{{item.star.length>2?item.star:item.star+'.0'}}</text>
							<text class="time">营业时间：{{item.start_open_time||'无'}}</text>
						</view>
						<view class="phone">联系电话：{{item.contact_phone}}</view>
						<view class="address">
							地址：{{item.shop_province+item.shop_city+item.shop_district+item.shop_address}}</view>
					</view>
				</view>
			</view>
		</view>
		<nodata v-if="list.length ==0" />
		<view class="flex-c" v-else>到底了~</view>
	</view>
</template>

<script>
	import {
		getTwoClassListApi,
		getTwoClassGoodsListApi
	} from "@/common/api.js"
	export default {
		data() {
			return {
				searchValue: '',
				src: '',
				TabCur: 0,
				scrollLeft: 0,
				id: 0,
				tab: [],
				list: [],
				page: 1,
				limit: 30,
				last_page: 1,
				city: '',
				district: '',
				no: 0,
				newt: 0,
				cid: '', //经营分类id
				eic: '', //二级经营分类id
			};
		},
		computed: {
			show(t) {
				return function(t) {
					let time = new Date(t.settled_expiry_time).getTime() / 1000; //到期时间戳
					if (this.newt < time) {
						return true
					} else {
						return false
					}
				}
			}
		},
		onLoad(e) {
			console.log("传了什么过来", e)
			if (e && e.name) {
				uni.setNavigationBarTitle({
					title: e.name
				})
				this.cid = e.id
				this.getTwoClassList(e.cid)
			}
			this.newt = Date.parse(new Date()) / 1000 //当前时间戳
			this.city = getApp().globalData.city
			console.log(this.city, '城市：：：');
			this.district = getApp().globalData.district
			console.log("全局位置信息111111111111111", this.city, this.district);
			// this.$api.index_9({}, false).then(res => {
			// 	this.tab = res.data
			// })
			this.src = this.$base
			this.TabCur = e.tab
			this.id = e.id
			this.getdata(this.id)
		},
		onShow() {},
		onReachBottom() {
			if (this.page == this.last_page) {
				return
			} else {
				this.page++
				this.getdata(this.tab[this.TabCur].id)
			}
			console.log(this.page);
		},
		methods: {
			input(res) {
				console.log('----input:', res)
				this.searchValue = res
				this.list = []
				this.getdata(this.id)
			},
			clear(res) {
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			getTwoClassList(id) {
				getTwoClassListApi({}, id, null).then(res => {
					this.tab = res.data
				})
			},
			getdata(id) {
				let _this = this;
				console.log(_this.city,'_this.city========');
				console.log(_this.district,'_this.district========');
				_this.$api.mains_list({
					page: _this.page,
					limit: _this.limit,
					city: _this.city,
					district: _this.district,
					keyword: _this.searchValue
				}, id, 1).then(res => {
					console.log("获取商品", res);
					_this.last_page = res.last_page
					if (res.list.length == 0) {
						_this.no = 1
						if (_this.page == 1) {
							_this.page = 1
						} else {
							_this.page--
						}
						return
					} else {
						_this.list = [..._this.list, ...res.list]
						console.log("拼接完成", _this.list)
						for (let i = 0; i < _this.list.length; i++) {
							_this.list[i].phone = _this.list[i].contact_phone
							_this.list[i].contact_phone = _this.$utils.phoneAk(_this.list[i].contact_phone)
						}
					}
				})
			},
			// tabSelect(e) {
			// 	console.log("点击了哪里",e)
			// 	if(this.TabCur == e.currentTarget.dataset.id) return
			// 	this.TabCur = e.currentTarget.dataset.id;
			// 	this.page = 1
			// 	this.last_page = 1
			// 	console.log(this.TabCur);
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// 	uni.setNavigationBarTitle({
			// 		title:this.tab[this.TabCur].name,
			// 	})
			// 	this.list = []
			// 	this.getdata(this.tab[this.TabCur].main_id)
			// },
			tabSelect(item, i) {
				console.log("点击了哪里", item)
				this.eic = item.id
				this.TabCur = i;
				this.page = 1
				this.last_page = 1
				this.scrollLeft = (i - 1) * 60
				// uni.setNavigationBarTitle({
				// 	title: this.tab[this.TabCur].name,
				// })
				this.list = []
				// this.getdata(item.main_id)
				getTwoClassGoodsListApi({
					city: this.city,
					district: this.district,
					category_id: item.category_id,
					second_category_id: this.eic
				}).then(res => {
					console.log(res)
					this.list = res.list
				})
			},
			handlelist(e) {
				uni.navigateTo({
					url: '../shop?e=' + JSON.stringify(e)
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-input {
		background-color: #fff;
		margin-top: 18rpx;
	}

	.tab {
		margin-top: 18rpx;
		font-size: 28rpx;

		.text-green {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.list {
		padding: 20rpx;

		.item {
			width: 710rpx;
			height: 260rpx;
			padding: 28rpx 22rpx 24rpx 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.img_div {
				width: 208rpx;
				height: 208rpx;

				image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 10rpx;
				}
			}

			.text_div {
				width: 443rpx;
				padding-left: 14rpx;

				.food_name {
					font-size: 32rpx;
					color: #333;

					.state {
						color: #1CD699;
					}

					.state1 {
						color: #999999;
					}
				}

				.score {
					margin-top: 8rpx;
					margin-bottom: 14rpx;

					text {
						color: #FF6F10;
					}

					.cuIcon-favorfill,
					.num {
						font-size: 26rpx;
					}

					.num {
						margin: 0 10rpx;
					}
				}

				.phone,
				.address {
					font-size: 24rpx;
					color: #999999;
				}

				.address {
					width: 100%;
					margin-top: 20rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
</style>